<template>
    <div class="payment-card-page">
        <!-- 页面头部 -->
        <TopNav
                title="基本信息"
                :showBack="true"
                :showAdd="false"
        />

        <!-- 表单区域 -->
        <van-form
                label-align="top"
                @submit="handleSubmit"
                @failed="handleFormError"
                class="payment-form"
        >


            <!-- 学习意愿 -->
            <van-field
                    v-model="formData.studyText"
                    name="studyText"
                    placeholder="请选择学习意愿"
                    :rules="[{ required: true, message: '请选择学习意愿' }]"
                    readonly
                    is-link
                    clickable
                    @click="showStudyPicker = true"
                    class="form-field"
            >
                <template #label>
                    学习意愿<span class="required"> *</span>
                </template>
            </van-field>

            <!-- 最高学历 -->
            <van-field
                    v-model="formData.educationText"
                    name="educationText"
                    placeholder="请选择最高学历"
                    :rules="[{ required: true, message: '请选择最高学历' }]"
                    readonly
                    is-link
                    clickable
                    @click="showEducationPicker = true"
                    class="form-field"
            >
                <template #label>
                    最高学历<span class="required"> *</span>
                </template>
            </van-field>

            <!-- 职业类型 -->
            <van-field
                    v-model="formData.occupationTypeText"
                    name="occupationTypeText"
                    placeholder="请选择职业类型"
                    :rules="[{ required: true, message: '请选择职业类型' }]"
                    readonly
                    is-link
                    clickable
                    @click="showOccupationTypePicker = true"
                    class="form-field"
            >
                <template #label>
                    职业类型<span class="required"> *</span>
                </template>
            </van-field>


            <!-- 月可支配收入 -->
            <van-field
                    v-model="formData.monthlyIncomeText"
                    name="monthlyIncomeText"
                    placeholder="请选择月可支配收入"
                    :rules="[{ required: true, message: '请选择月可支配收入' }]"
                    readonly
                    is-link
                    clickable
                    @click="showMonthlyIncomePicker = true"
                    class="form-field"
            >
                <template #label>
                    月可支配收入<span class="required"> *</span>
                </template>
            </van-field>

            <!-- 芝麻分 -->
            <van-field
                    v-model="formData.sesamePointsText"
                    name="sesamePointsText"
                    placeholder="请选择芝麻分"
                    :rules="[{ required: true, message: '请选择芝麻分' }]"
                    readonly
                    is-link
                    clickable
                    @click="showSesamePointsPicker = true"
                    class="form-field"
            >
                <template #label>
                    芝麻分<span class="required"> *</span>
                </template>
            </van-field>



            <!-- 常用微信号 -->
            <van-field
                    v-model="formData.wechatId"
                    name="wechatId"
                    :rules="[{ required: true, message: '请输入您的常用微信号' }]"
                    class="form-field"
                    placeholder="请输入您的常用微信号"
            >
                <template #label>
                    常用微信号<span class="required"> *</span>
                </template>
            </van-field>


            <!-- 邮箱 -->
            <van-field
                    v-model="formData.email"
                    name="email"
                    placeholder="请输入您的邮箱"
                    :rules="[
                        { required: true, message: '请输入您的邮箱' },
                        {
                            pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                            message: '请输入有效的邮箱地址'
                        }
                    ]"
                    class="form-field"
            >
                <template #label>
                    邮箱<span class="required"> *</span>
                </template>
            </van-field>

            <!-- 工作单位 -->
            <van-field
                    v-model="formData.workUnit"
                    name="workUnit"
                    placeholder="请输入您的工作单位"
                    class="form-field"
            >
                <template #label>
                    工作单位
                </template>
            </van-field>


            <!-- 提交按钮 -->
            <div class="form-actions">
                <MyButton text="下一步" />
            </div>
        </van-form>

        <van-action-sheet
                v-model:show="showStudyPicker"
                :actions="base.studys"
                @select="item => onSelect('studys', item)"
        />

        <van-action-sheet
                v-model:show="showEducationPicker"
                :actions="base.educations"
                @select="item => onSelect('educations', item)"
        />

        <van-action-sheet
                v-model:show="showOccupationTypePicker"
                :actions="base.occupationTypes"
                @select="item => onSelect('occupationTypes', item)"
        />

        <van-action-sheet
                v-model:show="showMonthlyIncomePicker"
                :actions="base.monthlyIncomes"
                @select="item => onSelect('monthlyIncomes', item)"
        />

        <van-action-sheet
                v-model:show="showSesamePointsPicker"
                :actions="base.sesamePoints"
                @select="item => onSelect('sesamePoints', item)"
        />

    </div>
</template>

<script>
    import TopNav from "@/components/TopNav.vue";
    import MyButton from "@/components/MyButton.vue";
    import {addUserContactBaseInfo,uploadFile} from '@/api/index.js'
    import {useRoute} from 'vue-router';

    export default {
        components: {
            TopNav, // 注册
            MyButton
        },

        data() {
            return {
                productId:'',
                showStudyPicker:false,
                showEducationPicker:false,
                showOccupationTypePicker:false,
                showMonthlyIncomePicker:false,
                showSesamePointsPicker:false,
                base:{
                    studys:[
                        {name:'职业或个人发展', value:'10'},
                        {name:'学习新技能', value:'20'},
                        {name:'兴趣爱好', value:'30'},
                        {name:'其他', value:'40'}
                    ],
                    educations:[
                        {name:'初中', value:'10'},
                        {name:'中专', value:'20'},
                        {name:'高中', value:'30'},
                        {name:'大专', value:'40'},
                        {name:'本科或以上', value:'50'},
                    ],
                    occupationTypes:[
                        {name:'学生', value:'10'},
                        {name:'中小企业', value:'20'},
                        {name:'大型企业', value:'30'},
                        {name:'国企/事业单位', value:'40'},
                        {name:'自由职业', value:'50'},
                        {name:'待业', value:'60'},
                    ],
                    monthlyIncomes:[
                        {name:'1000元以下', value:'10'},
                        {name:'1001-2000元', value:'20'},
                        {name:'2001-5000元', value:'30'},
                        {name:'5000元以上', value:'40'},
                    ],
                    sesamePoints:[
                        {name:'550分以下', value:'10'},
                        {name:'550-650分', value:'20'},
                        {name:'650分以上', value:'30'},
                        {name:'无', value:'40'},
                    ]
                },
                previewUrl11: require('@/assets/idcard11.png'),
                previewUrl00: require('@/assets/idcard00.png'),

                // 初始表单数据
                initialFormData: {
                    studyText: '',
                    educationText: '',
                    occupationTypeText: '',
                    monthlyIncomeText: '',
                    sesamePointsText: '',
                    study: '',
                    education: '',
                    occupationType: '',
                    monthlyIncome: '',
                    sesamePoints: '',
                    wechatId: '',
                    email: '',
                    workUnit: ''
                },
                formData: {}
            };
        },
        methods: {
            onSelect(type,item) {
                const map = {
                    studys: { text: 'studyText', value: 'study', picker: 'showStudyPicker' },
                    educations: { text: 'educationText', value: 'education', picker: 'showEducationPicker' },
                    occupationTypes: { text: 'occupationTypeText', value: 'occupationType', picker: 'showOccupationTypePicker' },
                    monthlyIncomes: { text: 'monthlyIncomeText', value: 'monthlyIncome', picker: 'showMonthlyIncomePicker' },
                    sesamePoints: { text: 'sesamePointsText', value: 'sesamePoints', picker: 'showSesamePointsPicker' }
                };

                const config = map[type];
                if (!config) return;

                this.formData[config.text] = item.name;
                this.formData[config.value] = item.value;

                this[config.picker] = false;
            },
            // 处理表单提交
            async handleSubmit() {
                let res = await addUserContactBaseInfo(this.formData);
                if (res.code === 200) {
                    this.resetForm();
                    this.$router.push(`/userCert/contactPerson?productId=${this.productId}`);
                }
            },
            // 点击容器时，触发隐藏 input
            triggerUpload(type) {
                if (type === '11') {
                    this.$refs.fileInput11.click();
                } else if (type === '00') {
                    this.$refs.fileInput00.click();
                }
            },
            // 选择文件后更新预览
            async handleFileChange(event, type) {
                const file = event.target.files[0];
                console.log('==type',type)
                if (file) {
                    const formData = new FormData();
                    formData.append("file", file);

                    const result = await uploadFile(formData);
                    if (result.code === 200) {
                        if (type === '11') {
                            this.previewUrl11 = result.data;
                            this.formData.idcardFront = this.previewUrl11;
                        } else {
                            this.previewUrl00 = result.data;
                            this.formData.idcardBack = this.previewUrl00;
                        }
                    }
                }
            },
            resetForm() {
                this.formData = { ...this.initialFormData };
            },

        },
        mounted() {
            const route = useRoute();
            let productId = route.query.productId;
            this.productId = productId;
            this.resetForm();
        }
    };
</script>

<style scoped>
    .payment-card-page {
        background-color: #f5f5f5;
        min-height: 100vh;
    }

    .page-header {
        background-color: #ffffff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .payment-form {
        background-color: #ffffff;
        margin-top: 10px;
        padding: 0 16px;
    }

    .card-type-group {
        display: flex;
        padding: 16px 0;
        border-bottom: 10px solid #eee;
    }

    .card-type-item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .card-icon {
        margin-right: 8px;
        color: #1989fa;
    }

    .form-field {
        border-bottom: 1px solid #eee;
    }

    .form-actions {
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }


    .cancel-btn {
        background-color: transparent;
        color: #666;
    }

    .bank-picker-popup {
        width: 100%;
    }

    .required {
        color: red;
        margin-right: 4px;
    }

    .color-btn {
        background: linear-gradient(90deg, #407fff, #1a60d0);
    }

    /* 确保光标在移动端居中 */
    .van-search__field {
        height: 36px;
        line-height: 36px;
    }

    .van-search__input {
        height: 100%;
        line-height: 36px;
        font-size: 16px;
        padding: 0 10px;
    }

    .identity-info-page {
        padding-top: 16px;
        background-color: #fff;
        min-height: 100vh;
        box-sizing: border-box;
    }

    /* 证件占位容器 */
    .card-container {
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        padding: 16px;
    }

    .card-item {
        width: 50%;
        padding: 3px;
    }

    .card-avatar, .card-nation {
        border-radius: 4px;
        min-height: 120px;
    }

    .upload-box {
        border: 2px dashed #ccc; /* 虚线边框 */
        border-radius: 8px; /* 圆角，可选 */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        box-sizing: border-box;
        cursor: pointer;
        background-color: #fff; /* 背景色 */
    }

    .upload-box img {
        max-width: 80%; /* 图片最大宽度 */
        max-height: 70%; /* 图片最大高度 */
        object-fit: contain;
    }

    .upload-text {
        margin-top: 8px;
        font-size: 14px;
        color: #999;
    }


</style>
